
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>News Title</title>
    <link rel="stylesheet" type="text/css" href="../css/bootstrap.css">
    <script type="text/javascript" src="../js/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="../js/bootstrap.js"></script>
    <script type="text/javascript" src="js/jquery-3.1.1.js"></script>
    <script>
        function del() {
            var boolean = confirm("确认删除");
            if(boolean){
                return true;
            }else{
                return false
            }
        }
    </script>
</head>
<body>
      <h2 style="text-align: center; letter-spacing: 25px; color: pink">欢迎
          <span style="color:chartreuse;letter-spacing: 2px">${userLogin.userName}</span>
          用户来到新闻操作界面
          <span style=" display:block;float:right;width:150px;text-align: center;" id="spanoutid">
              <a href="login.jsp" onclick="return outuser()">退出</a>
          </span>
      </h2>
      <div>
          <img src="../images/news1.png" style="width: 100%; height: 150px">
      </div>

      <div class="modal fade" id="myModal" tabindex="-1" role="dialog"
           aria-labelledby="myModalLabel" aria-hidden="true">
          <div class="modal-dialog">
              <div class="modal-content">
                  <div class="modal-header">
                      <button type="button" class="close" data-dismiss="modal"
                              aria-hidden="true">&times;</button>
                      <h4 class="modal-title" id="myModalLabel">确定要删除吗？</h4>
                  </div>

                  <div class="modal-footer">
                      <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                      <button type="button" class="btn btn-primary">确定</button>
                  </div>
              </div>
          </div>
      </div>
      <div class="container">
          <form action="QueryLimitNewsServlet" style="margin-top: 30px" method="post">
             <div>
                 <input type="text" id="searchword" name="keyword" size="50" placeholder="请输入想要搜索的新闻标题内容" onchange="searchkey(this)" value="${keyword}">
                 &nbsp &nbsp &nbsp  <input type="submit" value="搜索">
             </div>
              <div id="showdiv" style="border: 1px solid cornflowerblue;display: none;width: 380px;">

              </div>
          </form>
          <a href="QueryBoardsServlet"
             class="btn btn-primary btn-sm active pull-right" role="button">添加新闻</a>
          <a href="addboard.jsp?"
             class="btn btn-primary btn-sm active pull-right" role="button">添加板块</a>
          <table class="table table-bordered table-hover" style="margin-top: 50px">
              <caption>新闻列表</caption>
              <thead>
              <tr>
                  <th>新闻编号</th>
                  <th>新闻标题</th>
                  <th>板块名称</th>
                  <th>新闻内容</th>
                  <th>操作</th>
              </tr>
              </thead>
              <c:if test="${not empty listnews}">
                  <c:forEach var="newsdemo" items="${listnews}">
                      <tr>
                          <td>${newsdemo.newId }</td>
                          <td>${newsdemo.title}</td>
                          <td>${newsdemo.boarddemo.boardName}</td>
                          <td>${newsdemo.context}</td>
                          <td><a href="QueryNewsByIdServlet?newsId=${newsdemo.newId}">修改 &nbsp &nbsp </a>
                              <a href="DeleteNewsServlet?newsId=${newsdemo.newId}" onclick="return del()">删除</a>
                          </td>
                      </tr>
                  </c:forEach>
              </c:if>
          </table>

          <nav aria-label="Page navigation" class="pull-right">
              <ul class="pager">
                  <li>共 ${numnews.count }页</li>
                  <li>&nbsp&nbsp 第 ${numnews.pageNo }页</li>
                  <c:if test="${ numnews.pageNo >1 }">
                      <li><a href="QueryLimitNewsServlet?pageno=1&keyword=${keyword}">首页</a></li>
                      <li><a href="QueryLimitNewsServlet?pageno=${numnews.pageNo-1 }&keyword=${keyword}">上一页</a></li>
                  </c:if>
                  <c:if test="${numnews.pageNo < numnews.count }">
                      <li><a href="QueryLimitNewsServlet?pageno=${ numnews.pageNo +1 }&keyword=${keyword}">下一页</a></li>
                      <li><a href="QueryLimitNewsServlet?pageno=${numnews.count }&keyword=${keyword}"> 末页 </a></li>
                  </c:if>
              </ul>
          </nav>

      </div>
      <%--<c:remove var="numnews"/>
      <c:remove var="listnews"/>--%>
      <script>
              function searchkey(obj) {
                  $.ajax({
                      url:"SearchNewsLikeServlet",
                      type:"POST",
                      data:{
                          'searchkey':obj.value
                      },
                      dateType:"json",
                      success:function (result) {
                          var showdiv = document.getElementById("showdiv");
                          showdiv.innerHTML="";
                          for(var i=0;i < result.length;i++){
                              showdiv.style.display="block";
                              var divnode = document.createElement("div");
                              divnode.innerHTML='<p onmouseover="changebackground(this)" onmouseout="outchange(this)" onclick="changeval(this)">'+result[i].title+'</p>';
                              showdiv.appendChild(divnode);
                          }
                      },
                  });
              }

              function changebackground(obj) {
                  obj.style.backgroundColor ="#9d9d9d";
              }
              function outchange(obj) {
                  obj.style.backgroundColor ="white";
              }
              function changeval(obj) {
                  $("#searchword").val(obj.innerHTML);

                  $("#showdiv").css({'display':'none'});
                  $.ajax({
                      uri:'QueryLimitNewsServlet',
                      type:"POST",
                      data:{
                          'keyword':obj.innerHTML
                      },
                      success:function (result) {

                      }
                  })
              }
              var time = null ;
              var index = 4 ;
              function outuser() {
                  index= index-1
                  $("spanoutid").val(index);
                  if(index>0){
                      time = setTimeout(outuser,5000);
                  }else{
                      clearTimeout(time);
                      return true ;
                  }
              }
      </script>
</body>
</html>
